﻿<#include "layout.ftl"/>

<@layout>

			<!-- header of the page -->
			<header id="header" class="version-ii">
	
				<div class="stick-holder">
					<div class="container">
						<div class="row holder">
							<div class="col-xs-3 col-sm-2">
								<!-- Logo of the page -->
								<div class="logo"><a href=""><img src="/static/images/logo2.png" alt="dot"></a></div>
								<!-- Logo of the page end -->
							</div>
							<div class="col-xs-9 col-sm-10 nav-holder">
								<!-- Nav of the page -->
								<nav id="nav" class="navbar navbar-default">
									<!-- Navbar Header of the page -->
									<div class="navbar-header">
										<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
											<span class="sr-only">Toggle navigation</span>
											<span class="icon-bar"></span>
											<span class="icon-bar"></span>
											<span class="icon-bar"></span>
										</button>
									</div>
									<!-- Navbar Header of the page end -->
									<a href="#" class="pull-right icon-menu"><span class="ico-menu"></span></a>
									<!-- Collapse of the page -->
									<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
										<ul class="nav navbar-nav navbar-right">
											<li><a href="/blog">Home</a></li>
											<li><a href="archive">Archive</a></li>
											<li><a href="contact">Contact</a></li>
										</ul>
									</div>
									<!-- Collapse of the page end -->
								</nav>
								<!-- Nav of the page -->
							</div>
						</div>
					</div>
				</div>
				<!-- Side Nav of the page -->
				<nav class="side-nav">
					<a href="#" class="close"><i class="fa fa-times"></i></a>
					<!-- Widget of the page -->
					<h2>About me</h2>
					<section class="widget profile-widget">
						<div class="profile-pic">
							<a href="#">
								<img src="/static/images/img11.jpg" alt="John Aston">
							</a>
						</div>
						<h3><a href="#">John Aston</a></h3>
						<p>Hi, I am John Aston. Duis autem vel eum dolor in hendrerit in vulputate velit esse mole consequat, vel illum dolore eu feugiat nulla lisis at vero eros et accumsan et iusto.</p>
						<!-- Social Network of the page -->
						<ul class="social-networks">
							<li><a href="#"><span class="icon ico-facebook"></span></a></li>
							<li><a href="#"><span class="icon ico-twitter"></span></a></li>
							<li><a href="#"><span class="icon ico-google-plus"></span></a></li>
							<li><a href="#"><span class="icon ico-linkedin"></span></a></li>
							<li><a href="#"><span class="icon ico-pinterest"></span></a></li>
						</ul>
						<!-- Social Network of the page end -->
					</section>
					<!-- Widget of the page end -->
				</nav>
				<!-- Side Nav of the page end -->
			</header>
			<!-- Header of the page end -->
			<!-- Main of the page -->
			<main id="main" role="main">
				<!-- Page head of the page -->
				<header class="page-head wow fadeInUp" data-wow-delay="0.6s" style="background-image: url(/static/images/img52.jpg);">
					<div class="container">
						<div class="row">
							<div class="col-xs-12">
								<h1>Archive Page</h1>
								<ol class="breadcrumb">
									<li><a href="/">Home</a></li>
									<li class="active">Archive</li>
								</ol>
							</div>
						</div>
					</div>
				</header>
				<!-- Page head of the page end -->
				<div id="twocolumns" class="container">
					<div class="row">
						<div class="col-xs-12">
							<div class="main-header">
                                <strong class="title">Showing post for “${categoryName}”</strong>
							</div>
						</div>
					</div>
					<div class="row">
						<!-- Content of the page -->
						<div id="content" class="col-xs-12 col-md-8">
							<!-- Widget of the page -->
							<div class="widget widget_search hidden-md hidden-lg">
								<form method="get" class="search-form" action="#">
									<fieldset>
										<input type="search" name="s" placeholder="Type to search here">
										<button type="button" class="ico-search"></button>
									</fieldset>
								</form>
							</div>
							<!-- Widget of the page end -->
							<!-- Widget of the page -->
							<section class="widget profile-widget version-ii hidden-lg hidden-md">
								<div class="profile-pic">
									<a href="#">
										<img src="/static/images/img11.jpg" alt="John Aston">
									</a>
								</div>
								<h3><a href="#"><img src="/static/images/text-jhon-aston.png" alt="jhon aston"></a></h3>
								<p>Hi, I am John Aston. Duis autem vel eum dolor in hendrerit in vulputate velit esse mole consequat, vel illum dolore eu feugiat nulla lisis at vero eros et accumsan et iusto.</p>
								<!-- Social Network of the page -->
								<ul class="social-networks">
									<li><a href="#"><span class="icon ico-facebook"></span></a></li>
									<li><a href="#"><span class="icon ico-twitter"></span></a></li>
									<li><a href="#"><span class="icon ico-google-plus"></span></a></li>
									<li><a href="#"><span class="icon ico-linkedin"></span></a></li>
									<li><a href="#"><span class="icon ico-pinterest"></span></a></li>
								</ul>
								<!-- SOcial Network of the page end -->
							</section>
							<!-- Widget of the page end -->
							<!-- Posts Blocks of the page -->
							<section class="posts-blocks">
								<#list contents as item >
                                    <#if item.parentId==0>
                                        <#assign url="/blog/archive/${item.id}">
                                    <#else >
                                        <#assign url="/blog/${item.id}">
                                    </#if>

                                    <article class="post-block wow fadeInUp" data-wow-delay="0.6s">
                                        <div class="post-holder">
                                            <div class="img-holder">
                                                <a href="${url}"><img src="/static/images/img06.jpg"
                                                                                alt="image description"></a>
                                            </div>
                                            <time datetime="2011-01-12"><a
                                                    href="#">${item.created?string("dd'TH' MMMM yyyy")} - Travel</a>
                                            </time>
                                            <h2><a href="${url}" >${item.title}</a></h2>
                                            <p>${item.summary!}</p>
                                            <a href="${url}" class="read-more">Read more</a>
                                            <footer>
                                                <strong class="text comment-count"><span
                                                        class="icon ico-comment"></span><a href="#">25
                                                    comments</a></strong>
                                                <strong class="text share-count"><span class="icon ico-share"></span><a
                                                        href="#">138 shares</a></strong>
                                            </footer>
                                        </div>
                                    </article>
								</#list>
							</section>
							<!-- Posts Blocks of the page end -->
							<!-- Navigation of the page -->
							<nav role="navigation" class="navigation pagination">
								<div class="nav-links">
									<a href="#" class="prev page-numbers">Prev post.</a>
									<a href="#" class="page-numbers">1</a>
									<span class="page-numbers current">2</span>
									<span class="page-numbers dots hidden">…</span>
									<a href="#" class="page-numbers">3</a>
									<a href="#" class="next page-numbers">NEXT post.</a>
								</div>
							</nav>
							<!-- Navigation of the page end -->
						</div>
						<!-- Sidebar of the page -->
						<aside id="sidebar" class="col-xs-12 col-md-4">
                            <@personal_temp></@personal_temp>
							<!-- Widget of the page -->
							<div class="widget widget_search hidden-sm hidden-xs wow fadeInUp" data-wow-delay="0.6s">
								<form method="get" class="search-form" action="#">
									<fieldset>
										<input type="search" name="s" placeholder="Type to search here">
										<button type="button" class="ico-search"></button>
									</fieldset>
								</form>
							</div>
							<!-- Widget of the page end -->
							<!-- Widget of the page -->
							<section class="widget recent-posts-widget version-ii wow fadeInUp" data-wow-delay="0.6s">
								<header class="tab-head">
									<h3><a class="active" href="#tab1">Recent Posts</a></h3>
									<h3><a href="#tab2">Popular Posts</a></h3>
								</header>
								<div class="tab-content">
									<div id="tab1">
										<ul>
											<li>
												<div class="alignleft">
													<img src="/static/images/img27.jpg" alt="image description">
												</div>
												<div class="descr">
													<h4><a href="single-post.html">Traveling is awesome if you <br>can enjoy.</a></h4>
													<span class="post-tag">
														<time datetime="2011-01-12"><a href="#">25th may</a></time>
													</span>
												</div>
											</li>
											<li>
												<div class="alignleft">
													<img src="/static/images/img28.jpg" alt="image description">
												</div>
												<div class="descr">
													<h4><a href="single-post.html">I get up in the morning looking <br>for an adventure.</a></h4>
													<span class="post-tag">
														<time datetime="2011-01-12"><a href="#">25th may</a></time>
													</span>
												</div>
											</li>
											<li>
												<div class="alignleft">
													<img src="/static/images/img29.jpg" alt="image description">
												</div>
												<div class="descr">
													<h4><a href="single-post.html">Holiday is awesome when loved <br>one beside me.</a></h4>
													<span class="post-tag">
														<time datetime="2011-01-12"><a href="#">25th may</a></time>
													</span>
												</div>
											</li>
										</ul>
									</div>
									<div id="tab2">
										<ul>
											<li>
												<div class="alignleft">
													<img src="/static/images/img29.jpg" alt="image description">
												</div>
												<div class="descr">
													<h4><a href="single-post.html">Holiday is awesome when loved <br>one beside me.</a></h4>
													<span class="post-tag">
														<time datetime="2011-01-12"><a href="#">25th may</a></time>
													</span>
												</div>
											</li>
											<li>
												<div class="alignleft">
													<img src="/static/images/img27.jpg" alt="image description">
												</div>
												<div class="descr">
													<h4><a href="single-post.html">Traveling is awesome if you <br>can enjoy.</a></h4>
													<span class="post-tag">
														<time datetime="2011-01-12"><a href="#">25th may</a></time>
													</span>
												</div>
											</li>
											<li>
												<div class="alignleft">
													<img src="/static/images/img28.jpg" alt="image description">
												</div>
												<div class="descr">
													<h4><a href="single-post.html">I get up in the morning looking <br>for an adventure.</a></h4>
													<span class="post-tag">
														<time datetime="2011-01-12"><a href="#">25th may</a></time>
													</span>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</section>
							<!-- Widget of the page end -->
							<!-- Widget of the page -->
							<div class="widget promo-widget">
								<a href="#"><img src="/static/images/ad-placeholder.jpg" alt="“Place your Advertisement here”"></a>
							</div>
							<!-- Widget of the page end -->
                            <@category_temp />
						</aside>
						<!-- Sidebar of the page end -->
					</div>
				</div>
				<!-- Instagram Slider of the page -->
				<div class="instagram-slider version-ii container-fluid wow fadeInUp" data-wow-delay="0.6s">
					<div class="row">
						<div class="mask">
							<div class="slideset">
								<div class="slide">
									<a href="#"><img src="/static/images/img30.jpg" alt="image description"></a>
								</div>
								<div class="slide">
									<a href="#"><img src="/static/images/img31.jpg" alt="image description"></a>
								</div>
								<div class="slide">
									<a href="#"><img src="/static/images/img35.jpg" alt="image description"></a>
								</div>
								<div class="slide">
									<a href="#"><img src="/static/images/img32.jpg" alt="image description"></a>
								</div>
								<div class="slide">
									<a href="#"><img src="/static/images/img33.jpg" alt="image description"></a>
								</div>
								<div class="slide">
									<a href="#"><img src="/static/images/img36.jpg" alt="image description"></a>
								</div>
								<div class="slide">
									<a href="#"><img src="/static/images/img34.jpg" alt="image description"></a>
								</div>
								<div class="slide">
									<a href="#"><img src="/static/images/img30.jpg" alt="image description"></a>
								</div>
								<div class="slide">
									<a href="#"><img src="/static/images/img31.jpg" alt="image description"></a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- Instagram Slider of the page end -->
			</main>
			<!-- Main of the page end -->

 </@layout>
